<template>
  <el-drawer title="告警详情" :visible.sync="drawerVisible" :size="'600px'" custom-class="data-element-drawer">
    <div class="drawer-body">
      <table class="dis-table">
        <tr>
          <th>数据点ID</th>
          <td width="20%">{{ model.dataElementId }}</td>
          <th>事件类型</th>
          <td>{{ model.category }}</td>
        </tr>
        <tr>
          <th>级别</th>
          <td>{{ model.severity }}</td>
          <th>状态</th>
          <td>{{ transState(model.conditionState) }}</td>
        </tr>
        <tr>
          <th>位号</th>
          <td>{{ model.source }}</td>
          <th>指标编码</th>
          <td>{{ model.itemCode }}</td>
        </tr>
        <tr>
          <th>行动者</th>
          <td>{{ model.actor }}</td>
          <th>属性是否修改</th>
          <td>{{ model.changeMask?"是":"否" }}</td>
        </tr>
        <tr>
          <th>是否确认</th>
          <td>{{ model.acked?"是":"否" }}</td>
          <th>质量戳</th>
          <td>{{ model.quality }}</td>
        </tr>
        <tr>
          <th>Condition名</th>
          <td>{{ model.conditionName }}</td>
          <th>SubCondition名</th>
          <td>{{ model.subConditionName }}</td>
        </tr>
        <tr>
          <th>属性</th>
          <td>{{ model.attributes }}</td>
          <th>发生时间</th>
          <td>{{ transDate(model.ocurrenceTime) }}</td>
        </tr>
        <tr>
          <th>报警触发时间</th>
          <td>{{ transDate(model.activeTime) }}</td>
          <th>原始事件信息</th>
          <td>{{ model.originalRecord }}</td>
        </tr>
        <tr>
          <th>是否被读取</th>
          <td>{{ model.readFlag?"是":"否" }}</td>
          <th>数据</th>
          <td>{{ model.currentValue }}</td>
        </tr>
        <tr>
          <th>阈值</th>
          <td>{{ model.threshold }}</td>
          <th>数据源的编码</th>
          <td>{{ model.equipmentId }}</td>
        </tr>
        <tr>
          <th>数据源的名称</th>
          <td>{{ model.equipmentName }}</td>
          <th>单位</th>
          <td>{{ model.units }}</td>
        </tr>
        <tr>
          <th>DCS类型</th>
          <td>{{ model.DCSType }}</td>
          <th>报警信息</th>
          <td>{{ model.message }}</td>
        </tr>
      </table>
    </div>
    <div class="drawer-footer">
      <el-button @click="close()">关闭</el-button>
    </div>
  </el-drawer>
</template>
<script>
import moment from "moment";

export default {
  props: {},
  data() {
    return {
      drawerVisible: false,
      model: {}
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    show(row) {
      this.resetModal();
      this.model = row;
      this.drawerVisible = true;
    },
    resetModal() {
      this.model = {};
    },
    close() {
      this.drawerVisible = false;
    },
    transState(conditionState) {
      let returnVal = "";
      switch (conditionState) {
        case 0:
          returnVal = "报警";
          break;
        case 1:
          returnVal = "消警";
          break;
      }
      return returnVal;
    },
    transDate(timestamp) {
      if (timestamp) {
        return moment(timestamp * 1000).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return "null";
      }
    }
  }
};
</script>

<style lang="scss">
.data-element-drawer {
  .el-drawer__body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .drawer-body {
    padding: 0 30px;
    flex: 1;
    overflow: auto;
    padding-bottom: 56px;
  }

  .drawer-footer {
    padding: 10px;
    background-color: #eef1f6;
    text-align: right;

    button {
      min-width: 100px;
    }
  }
}

.dis-table {
  width: 100%;
  border-collapse: collapse;

  tr {
    th {
      width: 140px;
      font-size: 14px;
      text-align: left;
      background: #eef1f6;
    }

    td {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      word-break: break-all;
      line-height: 23px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 14px;
      color: #606266;
    }

    th,
    td {
      border: 1px solid #dfe6ec;
      padding: 8px;
      vertical-align: middle;
    }
  }
}
</style>
